<template>
  <div class="poster" ref="poster">
    <div class="poster-wrapper" ref="posterWrapper">
      <div class="poster-container" v-if="showContainer" ref="posterContainer">
        <v-header class="poster-header"></v-header>
        <div class="poster-body">
          <div class="hoster-container">
            <div class="hoster-img"></div>
            <p class="hoster-email">{{email | phoneNumberFilter}}</p>
            <p class="hoster-message">{{email ? '邀請您加入CHAOEX' : '邀請好友註冊，雙方共同獲贈CHEX，邀請多多，獎勵多多！'}}</p>
          </div>
          <div class="activity">CHEX一個月連續空投活動進行中...</div>
          <div class="activity-description">註冊、邀請都送CHEX幣，不定期空投再送CHEX幣<br>快來領取您的專屬CHEX幣<br>和CHEX一起開啓你的暴富之旅！</div>
          <div class="qrcode-container">
            <qriously :value="qrcodeLink" class="qrcode-img" />
            <p class="qrcode-tip">-長按識別二維碼-</p>
          </div>
          <div class="link-container">
            <div class="link-item">
              <div class="link-item-icon link-item-icon-one"></div>
              <p class="link-item-name">隨時提幣</p>
            </div>
            <div class="link-item">
              <div class="link-item-icon link-item-icon-two"></div>
              <p class="link-item-name">獎勵&抵現</p>
            </div>
            <div class="link-item">
              <div class="link-item-icon link-item-icon-three"></div>
              <p class="link-item-name">幣幣交易</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="!showContainer" class="real-poster" ref="realPoster">
      <div class="poster-img-wrapper">
        <img :src="posterImg" alt="" class="poster-img">
      </div>
      <div class="remove-container">
        <p class="remove-description">長按上圖保存到相冊</p>
        <div @click="goBack" class="remove-icon"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { Loading } from 'element-ui'
import Header from '@/components/Header'
import html2canvas from 'html2canvas'
let fullscreenLoading = null
export default {
  name: 'poster',
  data () {
    return {
      showContainer: true,
      posterImg: '',
      qrcodeLink: this.$route.params.link,
      email: this.$route.params.email
    }
  },
  beforeRouteEnter (to, from, next) {
    fullscreenLoading = Loading.service({ fullscreen: true })
    next()
  },
  mounted () {
    this.$nextTick(() => {
      this._initScroll()
      this.saveImageInfo()
    })
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    _initScroll () {
      this.posterScroll = new this.$BScroll(this.$refs.poster, {
        click: true,
        preventDefaultException: {
          className: /(^|\s)qrcode-img(\s|$)|(^|\s)poster-img(\s|$)/
        }
      })
    },
    // 文本信息保存成图片
    saveImageInfo () {
      html2canvas(this.$refs.posterWrapper).then(canvas => {
        const image = canvas.toDataURL()
        this.showContainer = false
        this.posterImg = image
        fullscreenLoading.close()
      })
    }
  },
  filters: {
    phoneNumberFilter (value) {
      if (value) {
        return value.substring(0, 3) + '****' + value.substr(value.length - 4)
      } else {
        return 'CHAOEX邀請送獎勵'
      }
    }
  },
  components: {
    vHeader: Header
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.poster-wrapper{
  background: url("../assets/images/bg.png") no-repeat;
  background-size: cover;
}
.poster-container{
  padding: 72px 36px 36px;
  .poster-header{
    margin-bottom: 41px;
  }
  .poster-body{
    box-sizing: border-box;
    width: 100%;
    padding-top: 62px;
    padding-bottom: 29px;
    background: rgba(255,255,255,1);
    border-radius: 9px;
    .hoster-container{
      font-size: 0;
      text-align: center;
      .hoster-email{
        height: 26px;
        margin-bottom: 15px;
        font-size: 26px;
        font-weight: bold;
        color:rgba(234,185,0,1);
        line-height: 26px;
      }
      .hoster-message{
        height: 32px;
        margin-bottom: 86px;
        font-size: 32px;
        font-weight: bold;
        color: rgba(234,185,0,1);
      }
    }
    .activity{
      width: 558px;
      height: 36px;
      margin: 0 auto 38px;
      font-size: 34px;
      font-weight: bold;
      color: rgba(219,27,45,1);
      line-height: 36px;
      text-align: center;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .activity-description{
      width: 558px;
      margin: 0 auto 39px;
      font-size: 24px;
      color: rgba(102,102,102,1);
      line-height: 36px;
      text-align: center;
    }
    .qrcode-container{
      width: 223px;
      margin: 0 auto 4px;
      text-align: center;
      font-size: 0;
      .qrcode-img{
        width: 223px;
        height: 215px;
        margin-bottom: 4px;
      }
      .qrcode-tip{
        margin-bottom: 80px;
        font-size: 24px;
        color: rgba(102,102,102,1);
        line-height: 24px;
      }
    }
    .link-container{
      height: 98px;
      .link-item{
        float: left;
        width: 33.3%;
        position: relative;
        flex: 1;
        text-align: center;
        &:after{
          display: block;
          position: absolute;
          top: 22px;
          right: 0;
          height: 65px;
          border-right: 1px solid rgba(229,229,229,1); /*no*/
          content: "";
        }
        .link-item-icon{
          width: 87px;
          height: 74px;
          margin: 0 auto 12px;
        }
        .link-item-name{
          font-size: 24px;
          font-weight:600;
          color: rgba(29,64,180,1);
          line-height: 24px;
        }
      }
    }
  }
}

.hoster-img{
  width: 199px;
  height: 128px;
  margin: 0 auto 31px;
  background: url("../assets/images/group.png") no-repeat;
  background-size: cover;
}
.link-item-icon-one{
  background: url("../assets/images/draw-cash.png") no-repeat;
  background-size: cover;
}
.link-item-icon-two{
  background: url("../assets/images/reward.png") no-repeat;
  background-size: cover;
}
.link-item-icon-three{
  background: url("../assets/images/trade.png") no-repeat;
  background-size: cover;
}
.remove-icon{
  width: 40px;
  height: 40px;
  border: 4px solid #fff;
  border-radius: 50%;
  margin: 0 auto;
  background: url("../assets/images/nav-close.png") no-repeat;
  background-size: cover;
}

.real-poster{
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.poster-img-wrapper{
  width: 66%;
  margin: 0 auto;
  text-align: center;
  .poster-img{
    width: 100%;
  }
}
.remove-description{
  margin: 10px 0 10px;
  height: 20px;
  line-height: 20px;
  font-size: 20px;
  color: #fff;
  text-align: center;
}

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  .link-item
    &:after
      -webkit-transform: scaleX(0.7);
      transform: scaleX(0.7);

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .poster-wrapper
    background: url("../assets/images/bg@2x.png") no-repeat;
    background-size: cover;
  .hoster-img
    background: url("../assets/images/group@2x.png") no-repeat;
    background-size: cover;
  .link-item-icon-one
    background: url("../assets/images/draw-cash@2x.png") no-repeat;
    background-size: cover;
  .link-item-icon-two
    background: url("../assets/images/reward@2x.png") no-repeat;
    background-size: cover;
  .link-item-icon-three
    background: url("../assets/images/trade@2x.png") no-repeat;
    background-size: cover;
  .link-item
    &:after
      -webkit-transform: scaleX(0.5);
      transform: scaleX(0.5);

@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
  .poster-wrapper
    background: url("../assets/images/bg@3x.png") no-repeat;
    background-size: cover;
  .hoster-img
    background: url("../assets/images/group@2x.png") no-repeat;
    background-size: cover;
  .link-item-icon-one
    background: url("../assets/images/draw-cash@2x.png") no-repeat;
    background-size: cover;
  .link-item-icon-two
    background: url("../assets/images/reward@2x.png") no-repeat;
    background-size: cover;
  .link-item-icon-three
    background: url("../assets/images/trade@2x.png") no-repeat;
    background-size: cover;

</style>
